﻿<div class="sign-up sign-up-by-email">
    <div class="sign-up-header">
        <h3>
            注册帐户</h3>
        <p class="help-block">
            asdf</p>
    </div>
    <div class="sign-up-body">
        <ul class="nav nav-tabs">
            <li class="active"><a href="javascrip:void(0);">使用邮箱注册</a></li>
            <li><a href="/signup/mobile">使用手机号码注册</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row">
                    <div class="col-md-offset-1 col-md-7">
                        <form action="/signup?@(Request.QueryString)" method="post" autocomplete="off" class="form-horizontal"
                              id="form-sign-up-by-email">
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <p id="sign-up-message" class="form-control-static">
                                    &nbsp;</p>
                            </div>
                        </div>
                        <div id="form-group-for-email" class="form-group">
                            <label for="email" class="col-md-2 control-label" data-content="使用常用邮箱作为用户名，通过验证后可用于登录和找回密码。"
                                data-original-title="温馨提醒" data-placement="top" data-trigger="hover" data-rel="popover">
                                电子邮箱
                            </label>
                            <div class="col-md-10">
                                <input id="email" name="email" type="email" class="form-control" maxlength="30" autocomplete="off"
                                    required="required" placeholder="电子邮箱" />
                                <p id="help-block-for-email" class="help-block">
                                    使用常用邮箱作为用户名！</p>
                            </div>
                        </div>
                        <div id="form-group-for-password" class="form-group">
                            <label for="password" class="col-md-2 control-label" data-content="为了您的账户安全，请输入6-12位的密码。密码至少两个字母、两个数字、一个特殊字符！（字母区分大小写）"
                                data-original-title="温馨提醒" data-placement="top" data-trigger="hover" data-rel="popover">
                                登录密码</label>
                            <div class="col-md-10">
                                <input id="password" name="password" type="password" class="form-control" maxlength="12"
                                    autocomplete="off" onkeydown="if(event.ctrlKey) return false;" onmousedown="this.oncontextmenu = function() { return false;} "
                                    onpaste="return false" required="required" placeholder="请输入您的登录密码" />
                                <p id="help-block-for-password" class="help-block">
                                    6-12位，至少两个字母、两个数字、一个特殊字符！</p>
                            </div>
                        </div>
                        <div id="form-group-for-repassword" class="form-group">
                            <label for="repassword" class="col-md-2 control-label" data-original-title="温馨提醒"
                                data-content="为了您的账户安全，请输入6-12位的密码。密码至少两个字母、两个数字、一个特殊字符！（字母区分大小写）" data-placement="top"
                                data-trigger="hover" data-rel="popover">
                                确认密码</label>
                            <div class="col-md-10">
                                <input id="repassword" name="repassword" type="password" class="form-control" maxlength="12"
                                    autocomplete="off" onkeydown="if(event.ctrlKey) return false;" onmousedown="this.oncontextmenu = function() { return false;} "
                                    onpaste="return false" required="required" placeholder="请再次输入您的登录密码" />
                                <p id="help-block-for-repassword" class="help-block">
                                    6-12位，至少两个字母、两个数字、一个特殊字符！
                            </div>
                        </div>
                        <div id="form-group-for-captcha" class="form-group">
                            <label for="captcha" class="col-md-2 control-label" data-content="请输入图片中的4位字符。（不区分大小写）"
                                data-title="温馨提醒" data-placement="top" data-trigger="hover" data-rel="popover">
                                注册验证码</label>
                            <div class="col-md-10">
                                <div class="row">
                                    <div class="col-md-2">
                                        <input id="captcha" name="captcha" type="text" class="form-control input-mini" maxlength="4"
                                            autocomplete="off" required="required" placeholder="请输入" />
                                    </div>
                                    <div class="col-md-3">
                                        <img alt="点击刷新" onclick="this.src='/global/captcha/signup?'+Math.random();document.getElementById('captcha').value='';"
                                            src="/global/captcha/signup" class="captcha-img" id="sign-up-captcha-img" title="看不清？换一张">
                                    </div>
                                    <div class="col-md-3">
                                        <span onclick="document.getElementById('sign-up-captcha-img').src='/global/captcha/signup?'+Math.random();document.getElementById('captcha').value='';"
                                            class="captcha-img-refresh" title="看不清？换一张">看不清<br />
                                            换一张</span>
                                    </div>
                                </div>
                                <p id="help-block-for-captcha" class="help-block">
                                    请输入图片中的4位字符。（不区分大小写）</p>
                            </div>
                        </div>
                        <div id="form-group-for-protocol" class="form-group">
                            <div class="col-md-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input id="protocol" name="protocol" type="checkbox" />
                                        我已阅读并同意<a href="/">《用户注册协议》</a>
                                    </label>
                                </div>
                                <p id="help-block-for-protocol" class="help-block">
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-3">
                                <button id="btn-sign-up" class="btn btn-primary btn-lg" type="submit" data-default-text="同意协议并注册"
                                    data-loading-text="提交数据中...">
                                    同意协议并注册</button>
                            </div>
                            <div class="col-md-5">
                            </div>
                        </div>
                        </form>
                    </div>
                    <div class="col-md-4">
                        <div class="passport-register-quick">
                            <div class="passport-register-quick-header">
                            </div>
                            <div class="passport-register-quick-container">
                                中国大陆手机用户，<br />
                                编辑短信”<em>SK</em>“ 发送到：
                                <br />
                                <span class="mobile">1069099988</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sign-up-footer">
    </div>
</div>
<div id="dialog-sign-up" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" style="padding-top: 100px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    邮箱验证</h4>
            </div>
            <div class="modal-body">
                <p>
                    我们已向您的邮箱<span id="sign-up-email"></span>发送认证邮件
                </p>
                <p>
                    通过邮件中的链接地址，即可完成账号激活。邮件中的链接地址将在<span>30</span>分钟后失效，失效后请重新填写信息
                </p>
                <p>
                    <a target="_blank">登录邮箱</a>完成账号激活 <span><a href="javascript:void(0);" onclick="window.location.reload();">
                        换个邮箱注册</a></span>
                </p>
                <p class="mail-resend">
                    还没收到邮件？<a id="resendemail" class="btn btn-default disabled" href="javascript:void(0);"
                        onclick="reSend();">重新发送</a> <span id="resendtimer">120</span>
                </p>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@section css{
    <style type="text/css">
        
    </style>
}
@section js{
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="http://static.ayatta.com/js/jquery.validate.extend.js"></script>
    <script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        //$.fancybox.open({ href: '#dialog-sign-up', type: 'inline', modal: true, padding: 0 });
        function emailSuffixSource(query, process) {
            var val = query;
            if (val.indexOf('@@') >= 0) {
                val = val.substring(0, val.indexOf('@@'));
            }
            var availableTags = [val + "@@qq.com", val + "@@163.com", val + "@@sina.com", val + "@@sohu.com", val + "@@yahoo.cn", val + "@@gmail.com", val + "@@hotmail.com"];
            return availableTags;
        }

        $(function () {

            $('[data-rel="popover"]').popover();
            $('#email').typeahead({
                source: emailSuffixSource,
                updater: function (item) {
                    setTimeout(function () {
                        document.getElementById('email').focus();
                        document.getElementById('email').blur();
                    }, 100);
                    return item;
                }
            });
            //$('#username').on('change', onChange);
            $('#form-sign-up-by-email').validate({
                rules: { 'email': { required: true, email: true, remote: { url: "/global/usernotexist", type: "post", data: { name: function () { return $("#email").val(); } }} }, 'password': { required: true, password: true }, 'repassword': { required: true, password: false, equalTo: "#password" }, 'captcha': { required: true, rangelength: [4, 4], remote: '/global/captchavalidate/signup' }, 'protocol': { required: true} },
                messages: { 'email': { required: '请输入您的电子邮箱地址！', email: '请输入正确的电子邮箱地址！', remote: '该邮箱已被使用，请换一个！' }, password: { required: '请输入您的登录密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！' }, 'repassword': { required: '请再次输入您的登录密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！', equalTo: "两次输入的密码不一致！" }, 'captcha': { required: '请输入4位字符的验证码！（不区分大小写）', rangelength: '请输入4位字符的验证码！（不区分大小写）', remote: '验证码不正确，请重试！（4位字符，不区分大小写）' }, 'protocol': { required: '请接受服务条款！'} },
                submitHandler: function (form) {
                    $('#btn-sign-up').button('loading');
                    var param = $(form).serialize();
                    $.post(form.action, param, function (result) {

                        if (result.Status == true) {
                            var html = $.format("<a href='javascript:void(0);' onclick='reSend(\"{0}\");'>重新发送</a>", result.Message);

                            $("#sign-up-email").html($("#email").val());
                            $('#dialog-sign-up').modal({
                                keyboard: false,
                                backdrop: 'static'
                            });
                        } else {
                            $('#btn-sign-up').button('default');
                            $("#sign-up-message").addClass('text-danger').html(result.Message);
                            setTimeout(function () {
                                $("#sign-up-message").removeClass('text-danger').html('&nbsp;');
                            }, 2000);
                        }
                    });
                    return false;

                },
                validClass: "success",
                errorClass: "invalid",
                errorElement: "span",
                errorPlacement: function (error, element) {
                    var id = $(element).attr('id');
                    $("#help-block-for-" + id).html(error);
                },
                highlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(validClass).addClass(errorClass);
                    $("#form-group-for-" + id).removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(errorClass).addClass(validClass);
                    $("#help-block-for-" + id).html('&nbsp;');
                    $("#form-group-for-" + id).removeClass('has-error').addClass('has-success');
                }
            });
        });

        function reSignUp() {
            $('#btn-sign-up').button('default');
            document.getElementById('form-sign-up-by-email').reset();
            $('#dialog-sign-up').modal('hide');
        }

        function reSend(guid) {
            var url = "/register/resend";
            $.postJSON(url, { param: guid }, function (result) {
                if (result.Status == true) {
                    alert(0);
                } else {

                }
            });
        }

        function updateTimer() {
            var i = $("#resendtimer").html();
            if (i == 0) {
                $("#resendemail").removeClass('disabled').click(function () {
                    reSend();
                });
                return;
            }
            $("#resendtimer").html(i - 1);
            setTimeout(updateTimer, 1000);
        }

        function getSmsCode() {
            var mobile = document.getElementById('mobile').value;
            if (!mobile.isMobile()) {
                //alert('请输入正确的手机号码');
                $('#input-help-mobile').html("<span class='error'>请输入正确的手机号码！<span>");
            } else {
                $.postJSON('/home/smscode/0', { mobile: mobile }, function (result) {
                    if (result.Status == true) {
                        //$('#smscode').val('');
                        $("#control-getsmscode").hide();
                        document.getElementById('smscode').removeAttribute('disabled');
                        document.getElementById('mobile').setAttribute('readonly', 'readonly');
                        var info = "<span class='green'>我们已向该手机发送短信验证码，请注意查收！<span>";
                        $('#input-help-mobile').html(info);
                    } else {
                        var error = $.format("<span class='error'>{0}<span>", result.Message);
                        $('#input-help-mobile').html(error);

                    }
                });
            }
        }
    </script>
}
